<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test1 - Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style type="text/css" media="all">
        .container {
            border: 1px solid #000;
        }
        
        .row {
            margin-top: 50px;
        }
        
        .col-md-3,
        .col-md-6,
        .col-md-4,
        .col-md-1,
        .col-md-8 {
            border: 1px solid #CCC;
            //padding:1em;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-2</div>
            <div class="col-md-1">col-md-3</div>
            <div class="col-md-1">col-md-4</div>
            <div class="col-md-1">col-md-5</div>
            <div class="col-md-1">col-md-6</div>
            <div class="col-md-1">col-md-7</div>
            <div class="col-md-1">col-md-8</div>
            <div class="col-md-1">col-md-9</div>
            <div class="col-md-1">col-md-10</div>
            <div class="col-md-1">col-md-11</div>
            <div class="col-md-1">col-md-12</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-3">col-md-8</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <!--左右交换-->
        <div class="row">
            <div class="col-md-8 col-md-push-4">col-md-8</div>
            <div class="col-md-4 col-md-pull-8">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <!--栅格嵌套-->
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-2</div>
                    <div class="col-md-1">col-md-3</div>
                    <div class="col-md-1">col-md-4</div>
                    <div class="col-md-1">col-md-5</div>
                    <div class="col-md-1">col-md-6</div>
                    <div class="col-md-1">col-md-7</div>
                    <div class="col-md-1">col-md-8</div>
                    <div class="col-md-1">col-md-9</div>
                    <div class="col-md-1">col-md-10</div>
                    <div class="col-md-1">col-md-11</div>
                    <div class="col-md-1">col-md-12</div>
                </div>
            </div>
            <div class="col-md-6">col-md-6</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>
</body>

</html>
